<template>
	<view class="container">
		<view class="header" id="header">
			<u-tabs :list="listMenu" :scrollable="false" @change="menuChange" :current="index"></u-tabs>
			<view class="btn-search">
				<u-search action-text="" :show-action="false" v-model="feedBack.content" placeholder="请搜索"
					:animation="true" @search="formatData()"></u-search>
				<view class="shaixuan" @click="openCondition">
					<u-icon name="hourglass" color="#2979ff" /><text style="color: #2979ff">筛选</text>
				</view>
			</view>
			<view class="chuli">
				<view class="title">申诉处理({{feedBackList.length}})</view>
				<view class="hint">
					请核实并在3天内处理投诉，若长时间不处理，将影响支付的相关功能使用。
				</view>
			</view>
		</view>
		<u-transition :show="conditionBoolean" mode="fade-down">
			<view class="screen-warp" v-if="index == 1">
				<view class="title">处理状态</view>
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(listItem,listIndex) in statusList" :key="listIndex">
						<view class="text" :class="listItem.checked ? 'tag-sel' : 'tag'"
							@click="radioStatusClick(listIndex)">{{listItem.name}}</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="screen-warp" v-if="index == 1">
				<view class="title">反馈类型</view>
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(item,index) in typeList" :key="index">
						<view class="text" :class="item.checked ? 'tag-sel' : 'tag'" @click="radioTypeClick(index)">
							{{item.name}}
						</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="screen-warp">
				<view class="title">投诉时间</view>
				<view class="date">
					<view class="time" @click="selectTime('start')">
						{{startDateShow?startDateShow : '开始时间'}}
					</view>
					<view class="date-center">
						-
					</view>
					<view class="time" @click="selectTime('end')">
						{{endDateShow?endDateShow : '结束时间'}}
					</view>
				</view>
			</view>
			<view class="btn-warp">
				<view class="btn-whith"><u-button @click="reset" text="重置"></u-button></view>
				<view class="btn-whith"><u-button type="primary" @click="complete" text="完成"></u-button></view>
			</view>
		</u-transition>
		<u-popup :show="show" @close="close" @touchmove.stop.prevent="moveHandle" mode="center"
			:closeOnClickOverlay="false">
			<view>
				<scroll-view scroll-y style="max-height: 720rpx;border: 5rpx solid rgb(204, 204, 203);"
					lower-threshold="200" v-if="feedBackDetailList.length > 0">
					<uni-table border stripe emptyText="暂无更多数据">
						<!-- 表头行 -->
						<uni-tr>
							<uni-th align="center" width="100">日期</uni-th>
							<uni-th align="center" width="150">内容</uni-th>
							<uni-th align="center" width="80">图片</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item,index2) in feedBackDetailList" :key="index2">
							<uni-td width="100">
								<view class="tableFont">{{$date.dateFormatYMDHMS(item.operateTime)}}</view>
							</uni-td>
							<uni-td width="150">

								<view class="tableFont">
									<text class="tableFont status-tips-green" v-if="item.actionType == actionType.CREATE_COMPLAINT
								||item.actionType == actionType.CONTINUE_COMPLAINT
								||item.actionType == actionType.USER_RESPONSE">
										消费者：</text>
									<text class="tableFont status-tips-blue" v-else-if="item.actionType == actionType.MERCHANT_RESPONSE || item.actionType == actionType.MERCHANT_CONFIRM_COMPLETE
								|| item.actionType == actionType.CONSENSUS_WITH_CLIENT || item.actionType == actionType.ORTHER || item.actionType == actionType.RECTIFICATION_NO_REFUND
                || item.actionType == actionType.REFUND || item.actionType == actionType.SUBMIT_PROOF_NOT_CONTACTED">
										{{item.operator?item.operator+'：':'商家：'}}</text>
									<text class="tableFont status-tips-orange"
										v-else-if="item.actionType == actionType.SELLER_REFUND">
										系统通知：</text>
									<text class=" tableFont status-tips-orange" v-else>平台：</text>
									{{item.responseContent}}
								</view>
							</uni-td>
							<uni-td width="80">
								<view v-for="(item2,index3) in item.merchantComplaintResImageList" :key="index3">
									<image class="tableImg" :showLoading="true"
										:src="qiNiuImgURL +item2.imageName + '.jpg'"
										@click="previewImg(qiNiuImgURL +item2.imageName + '.jpg')"
										v-if="item2.imageName" />
								</view>

							</uni-td>
						</uni-tr>
					</uni-table>
				</scroll-view>
				<view class="reply-view">
					<text style="width: 160rpx;">投诉进程</text>
					<view v-if="openItem.complaintState == 'PENDING'" class="status-tips-red"> 未处理</view>
					<view v-if="openItem.complaintState == 'PROCESSED'" class="status-tips-green">已处理</view>
					<view v-if="openItem.complaintState == 'PROCESSING'" class="status-tips-orange">处理中</view>
				</view>
				<template v-if="openItem.channelType === '02'">
					<view class="reply-view" v-if="openItem.complaintState !='PROCESSED'">
						<text style="width: 160rpx;">回复内容</text>
						<u--textarea maxlength="125" v-model="complaint.responseContent" border="surround"
							placeholder="请输入回复内容"></u--textarea>
					</view>
					<view class="reply-view" v-if="openItem.complaintState !='PROCESSED'">
						<text style="width: 160rpx;">回复图片</text>
						<u-upload :fileList="responseImages" @afterRead="afterRead" @delete="deleteByFileNameToFTP"
							name="1" multiple :maxCount="3" :previewFullImage="true" width="60" height="60">
							<!-- <image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix"
                style="width: 250px;height: 150px;"></image> -->
						</u-upload>
					</view>
					<view class="u-m-t-20" v-if="openItem.complaintState !='PROCESSED'">
						<view>
							<u-button type="primary" @click="complaintResponse" text="回复消费者"></u-button>
						</view>
						<view class="btn-warp u-m-t-20">
							<u-button type="success" @click="complaintComplete" text="申请完结"></u-button>
							<u-button @click="close()" text="关闭页面"></u-button>
						</view>
						<!-- <view class="btn-whith2"></view> -->

					</view>
					<view class="btn-warp2" v-else>
						<view class="btn-whith3"><u-button type="primary" @click="close()" text="返回"></u-button></view>
					</view>
				</template>
				<template v-else-if="openItem.channelType === '01'">
					<u-form-item label="处理结果" labelWidth="80" class="search-more-input" v-if="openItem.complaintState !='PROCESSED'"
						@click="complaintHandleStateShow = true">
						<u-input v-model="complaintHandleStateName" inputAlign="right" border="none" clearable readonly
							suffixIcon="arrow-right"></u-input>
					</u-form-item>
					<view class="reply-view" v-if="openItem.complaintState !='PROCESSED'">
						<text style="width: 160rpx;">备注内容</text>
						<u--textarea maxlength="125" v-model="complaint.responseContent" border="surround"
							placeholder="请输入备注内容"></u--textarea>
					</view>
					<view class="reply-view" v-if="openItem.complaintState !='PROCESSED'">
						<text style="width: 160rpx;">处理图片</text>
						<u-upload :fileList="responseImages" @afterRead="afterRead" @delete="deleteByFileNameToFTP"
							name="1" multiple :maxCount="3" :previewFullImage="true" width="60" height="60">
							<!-- <image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix"
                style="width: 250px;height: 150px;"></image> -->
						</u-upload>
					</view>
					<view class="btn-warp u-m-t-20">
						<u-button type="success" @click="complaintComplete" text="处理"
							v-if="openItem.complaintState !='PROCESSED'"></u-button>
						<u-button @click="close()" text="关闭页面"></u-button>
					</view>
				</template>
			</view>
		</u-popup>
		<view class="content">
			<scroll-view scroll-y @scrolltolower="reachBottom" :style="[{height: height + 'px'}]" lower-threshold="200"
				v-if="feedBackList.length > 0">
				<view class="card" @click="nav(item.id)" v-for="(item,index0) in feedBackList" :key="index0"
					v-if="index == 1">
					<view class="detail">
						<view class="text">
							<u-avatar :src="item.headImgUrl" shape="square"></u-avatar>
							<view class="device-mobile">
								<view>{{item.phone}}</view>
								<view class="device">
									{{item.deviceTypeName?item.deviceTypeName:''}}{{item.deviceNo?item.deviceNo:''}}
								</view>
							</view>
						</view>
						<view class="dateTime">
							{{$date.dateFormatYMDHMS(item.createTime)}}
						</view>
					</view>
					<view class="feedback">
						<text>{{item.content}}</text>
					</view>
					<view class="btn-view">
						<view class="btn"><u-button type="error" size="mini" plain @click="nav(item.id)"
								v-if="item.status == 0">立即处理</u-button></view>
						<view v-if="item.status == 1" class="processed">已处理</view>
					</view>
				</view>
				<view class="card" v-for="(item,index1) in feedBackList" :key="index1" v-if="index == 0">
					<view class="detail-line">

					</view>
					<view class="detail-line">
						<view class="title-tips">支付平台</view>
						<view class="tableFont">
							<view v-if="item.channelType === '01'">支付宝</view>
							<view v-else-if="item.channelType === '02'">微信</view>
						</view>
					</view>
					<view class="detail-line">
						<view class="title-tips">平台单号</view>
						<view class="tableFont">
							<view>{{item.relateOrderNo}}</view>
							<view class="copy-text" @click="copyCode(item.relateOrderNo)">
								复制
							</view>
						</view>

					</view>
					<view class="detail-line">
						<view class="title-tips">交易单号</view>
						<view class="tableFont">
							<view>
								{{item.payChannelOrderNo}}
							</view>
							<view class="copy-text" @click="copyCode(item.payChannelOrderNo)">
								复制
							</view>
						</view>
					</view>
					<view class="detail-line">
						<view class="title-tips">联系电话</view>
						<view class="tableFont">
							<view>{{item.payerPhone}}</view>
							<view class="copy-text" @click="copyCode(item.payerPhone)">
								复制
							</view>
						</view>

					</view>
					<view class="detail-line">
						<view class="title-tips">投诉时间</view>
						<view class="tableFont">
							{{$date.dateFormatYMDHMS(item.createTime)}}
						</view>
					</view>
					<view class="detail-line">
						<view class="title-tips">状态</view>
						<view v-if="item.complaintState == 'PENDING'" class="status-tips-red"> 未处理</view>
						<view v-if="item.complaintState == 'PROCESSED'" class="status-tips-green">已处理</view>
						<view v-if="item.complaintState == 'PROCESSING'" class="status-tips-orange">处理中</view>
					</view>
					<view class="detail-line">
						<view class="title-tips">内容</view>
						<view class="tableFont">
							{{item.complaintDetail}}
						</view>
					</view>
					<view class="detail-line">
						<view class="title-tips"></view>
						<view class="btn-view">
							<view v-if="item.complaintState == 'PENDING'" class="btn"><u-button type="error" size="mini"
									plain @click="findMerchantComplaintContent(item)">立即处理</u-button></view>
							<view v-else class="btn"><u-button type="primary" size="mini" plain
									@click="findMerchantComplaintContent(item)">查看</u-button></view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :load-text="loadText" style="padding: 30rpx 0 70rpx 0;" />
			</scroll-view>
			<u-empty text='暂无投诉反馈' mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
		</view>
		<!-- 开始时间 -->
		<u-datetime-picker ref="starttimePicker" :show="starttimePickerShow" v-model="feedBack.startDate"
			:value="feedBack.startDate" mode="datetime" :formatter="formatter" @confirm="confirm"
			@cancel="starttimePickerShow = false"></u-datetime-picker>
		<!-- 结束时间 -->
		<u-datetime-picker ref="endtimePicker" :show="endtimePickerShow" v-model="feedBack.endDate"
			:value="feedBack.endDate" mode="datetime" :formatter="formatter" @confirm="confirm"
			@cancel="endtimePickerShow = false"></u-datetime-picker>

		<u-picker :show="complaintHandleStateShow" keyName="label" :columns="complaintHandleStateList"
			@confirm="selectComplaintHandleState" @cancel="complaintHandleStateShow = false"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qiNiuImgURL: this.$configPath.qiNiuImgURL,
				actionType: this.$actionType,
				responseImages: [],
				listMenu: [{
					name: '投诉',
				}, {
					name: '反馈',
				}],
				complaintHandleStateShow: false,
				complaintHandleStateList: [
					[{
						label: '已联系到用户，协商一致，无异议',
						value: 'CONSENSUS_WITH_CLIENT',
					}, {
						label: '其他',
						value: 'ORTHER',
					}, {
						label: '不涉及退款，已针对投诉内容进行整改',
						value: 'RECTIFICATION_NO_REFUND',
					}, {
						label: '已退款，用户无异议',
						value: 'REFUND',
					}, {
						label: '已提交证明材料',
						value: 'SUBMIT_PROOF_NOT_CONTACTED',
					}]
				],
				index: 0,
				startDateShow: null,
				endDateShow: null,
				complaintHandleStateName: '已联系到用户，协商一致，无异议',
				complaintHandleState: 'CONSENSUS_WITH_CLIENT',
				openItem: {},
				feedBackList: [],
				feedBackDetailList: [],
				show: false,
				height: 0,
				// 显示用
				starttimePickerShow: false,
				endtimePickerShow: false,
				feedBack: {
					statusList: [],
					typeList: [],
					startDate: null,
					endDate: null,
					content: '',
					pageNum: 1,
				},
				complaint: {
					responseImages: [],
					responseContent: '',
					complaintId: '',
					hlMerchantId: '',
					complaintHandleState: 'CONSENSUS_WITH_CLIENT',
				},
				conditionBoolean: false,
				status: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉加载',
					loading: '稍等一会,正在努力为您加载...',
					nomore: '没有更多了'
				},
				statusList: [{
					value: -1,
					name: '个人',
					checked: true
				}, {
					value: 0,
					name: '待处理',
					checked: false
				}, {
					value: 1,
					name: '已处理',
					checked: false
				}],
				typeList: [{
						value: -1,
						name: '不限',
						checked: true
					}, {
						value: 0,
						name: '问题',
						checked: false
					},
					{
						value: 1,
						name: '意见',
						checked: false
					}, {
						value: 2,
						name: '投诉',
						checked: false
					}
				],
				// 基本案列数据
				radiolist1: [{
						name: '处理中',
						disabled: false,
						value: 0
					},
					{
						name: '处理完成',
						disabled: false,
						value: 1
					},

				],
				radiovalue1: 0,
				imgList: [],
			}
		},
		mounted() {
			this.queryHeight();
		},
		onLoad() {
			// 将时间间隔改为最近一个月
			const oneMonthAgo = new Date();
			oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
			this.startDateShow = uni.$u.timeFormat(oneMonthAgo, 'yyyy-mm-dd hh:MM:ss');
			this.endDateShow = uni.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss');

			// 传给后端的时间
			this.feedBack.startDate = oneMonthAgo;
			this.feedBack.endDate = new Date();
			this.formatData();
		},
		onPullDownRefresh() {
			this.formatData();
		},
		methods: {
			selectComplaintHandleState(e) {
				this.complaintHandleStateShow = false;
				this.complaintHandleState = e.value[0].value;
				this.complaintHandleStateName = e.value[0].label;
			},
			queryHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#header').boundingClientRect(data => {
					this.height = uni.getSystemInfoSync().windowHeight - data.height - 20;
					console.log(this.height);
				}).exec();
			},
			openCondition() {
				this.conditionBoolean = !this.conditionBoolean
				// this.feedBackList = []
			},
			confirm(e) {
				if (this.timeStr === 'start') {
					this.feedBack.startDate = e.value
					this.startDateShow = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
					this.starttimePickerShow = false;
				} else if (this.timeStr === 'end') {
					this.feedBack.endDate = e.value
					this.endDateShow = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
					this.endtimePickerShow = false;
				}
			},
			formatter(type, value) {
				if (type === 'year') return `${value}年`
				if (type === 'month') return `${value}月`
				if (type === 'day') return `${value}日`
				if (type === 'hour') return `${value}时`
				if (type === 'minute') return `${value}分`
				return value
			},
			nav(id) {
				if (this.index == 0) {
					return;
				}
				uni.navigateTo({
					url: '/pages-other/feedback/feedback-detail/feedback-detail?id=' + id
				})
			},
			selectTime(str) {
				this.timeStr = str;
				if (str == 'start') {
					this.starttimePickerShow = true;
				} else if (str == 'end') {
					this.endtimePickerShow = true;
				}
			},
			//处理状态
			radioStatusClick(ind) {
				this.statusList.map((item, index) => {
					item.checked = index === ind ? true : false
				})
			},
			//反馈类型
			radioTypeClick(ind) {
				this.typeList.map((item, index) => {
					item.checked = index === ind ? true : false
				})
			},
			formatData() {
				this.feedBack.pageNum = 1;
				this.status = "loadmore";
				this.feedBackList = [];
				if (this.index == 0) {
					this.findComplainData();
				} else {
					this.findFeedbackData();
				}
			},
			findFeedbackData() {
				this.feedBackList = [];
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$api('feedback.findList', this.feedBack).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (res.data != null) {
						this.feedBackList.push(...res.data.list)
						this.feedBack.pageNum = res.data.pageNum;
						if (this.feedBack.pageNum >= res.data.pages) {
							this.status = 'nomore';
							return;
						}
					}
				})
			},
			findComplainData() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.$api('merchant.findComplainData', this.feedBack).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (res.data != null) {
						this.feedBackList.push(...res.data.list)
						this.feedBack.pageNum = res.data.pageNum;
						if (this.feedBack.pageNum >= res.data.pages) {
							this.status = 'nomore';
							return;
						}
					}
				})
			},
			reachBottom() {
				console.log("-------------下拉加载--------------")
				if (this.status == 'nomore') {
					return;
				}
				this.status = 'loading';
				// 使用延迟实现加载动画效果
				setTimeout(() => {
					this.feedBack.pageNum = ++this.feedBack.pageNum;
					if (this.index == 0) {
						this.findComplainData();
					} else {
						this.findFeedbackData();
					}
					this.status = 'loadmore';
				}, 2000)
			},
			// 重置
			reset() {
				this.statusList.forEach(item => {
					if (item.value == -1) {
						item.checked = true
					} else {
						item.checked = false;
					}
				});
				this.typeList.forEach(item => {
					if (item.value == -1) {
						item.checked = true
					} else {
						item.checked = false;
					}
				});
				//页面显示用的
				this.startDateShow = uni.$u.timeFormat(this.$date.getStartDate(), 'yyyy-mm-dd hh:MM:ss');
				this.endDateShow = uni.$u.timeFormat(this.$date.getEndDate(), 'yyyy-mm-dd hh:MM:ss');
				//传给后端用的
				this.feedBack.startDate = this.$date.getStartDate()
				this.feedBack.endDate = this.$date.getStartDate()
			},
			//完成
			complete() {
				this.feedBack.statusList = [];
				this.feedBack.typeList = [];
				this.feedBackList = [];
				this.statusList.forEach(item => {
					// 不限就不用传后端了,在后端直接判断集合长度大于0即可
					if (item.value != -1) {
						if (item.checked) {
							this.feedBack.statusList.push(item.value)
						}
					}
				});
				this.typeList.forEach(item => {
					// 不限就不用传后端了,在后端直接判断集合长度大于0即可
					if (item.value != -1) {
						if (item.checked) {
							this.feedBack.typeList.push(item.value)
						}
					}
				});
				this.status = 'loading';
				if (this.index == 0) {
					this.findComplainData();
				} else {
					this.findFeedbackData();
				}
				this.conditionBoolean = false
			},
			menuChange(item) {
				this.status = 'loading';
				this.index = item.index
				this.feedBackList = [];
				this.feedBack.pageNum = 1;
				this.conditionBoolean = false
				if (item.index == 0) {
					this.findComplainData();
				} else {
					this.findFeedbackData();
				}
			},
			close() {
				this.show = false;
				setTimeout(() => {
					this.feedBackDetailList = [];
					this.openItem = {};
					this.complaint = {};
					this.imgList = [];
					this.responseImages = [];
				}, 200);
			},
			showModel() {
				// this.queryHeight();
				// this.$forceUpdate();
				this.show = true
			},
			complaintResponse() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				console.log(this.openItem)
				this.complaint.complaintId = this.openItem.complaintId;
				this.complaint.responseImages = this.imgList;
				this.complaint.hlMerchantId = this.openItem.hlMerchantId;
				if (!this.complaint.complaintId) {
					uni.hideLoading();
					this.$helpers.toast("请选择回复的投诉订单");
					return
				}
				if (!this.complaint.responseContent) {
					uni.hideLoading();
					this.$helpers.toast("请输入回复内容");
					return
				}
				this.$api('merchant.complaintResponse', this.complaint).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (res.status == 0) {
						this.$helpers.toast("回复成功");
						this.formatData();
						this.close();
					} else {
						this.$helpers.toast('回复失败:' + res.msg);
					}
				})
			},
			complaintComplete() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				this.complaint.complaintHandleState = this.complaintHandleState;
				this.complaint.complaintId = this.openItem.complaintId;
				this.complaint.hlMerchantId = this.openItem.hlMerchantId;
        this.complaint.responseImages = this.imgList;
				if (!this.complaint.complaintId) {
					uni.hideLoading();
					this.$helpers.toast("请选择回复的投诉订单");
					return
				}
				this.$api('merchant.complaintComplete', this.complaint).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					if (res.status == 0) {
						this.$helpers.toast("投诉订单已完成");
						this.formatData();
						this.close();
					} else {
						this.$helpers.toast('处理失败:' + res.msg);
					}
				})
			},
			// 防止遮罩层滚动穿透
			moveHandle() {},
			findMerchantComplaintContent(item) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let params = {
					mchComplaintId: item.id
				}
				this.$api('merchant.findMerchantComplaintContent', params).then(res => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
					this.feedBackDetailList = [];
					this.feedBackDetailList = res.data;
					this.openItem = item;
					this.showModel();
				})
			},
			async afterRead(event) {
				uni.showLoading({
					title: '上传中',
					mask: true
				});
				const item = {
					url: event.file[0].url,
					status: 'uploading',
					message: '上传中'
				};
				this.responseImages.push(item); // 添加到数组末尾
				const index = this.responseImages.length - 1; // 获取当前图片的索引

				uni.compressImage({
					src: event.file[0].url,
					quality: 30, // 越小质量越不好，但压缩率就更高
					success: async res => {
						this.uploadFilePromise(res.tempFilePath).then((result) => {
							// 使用索引更新当前图片的状态，而不是总是更新第一个
							this.responseImages.splice(index, 1, Object.assign(item, {
								status: 'success',
								message: '',
								url: event.file[0].url
							}));
						}).catch((err) => {
							console.error("bankCardACatch", err);
							this.responseImages.splice(index, 1); // 移除当前图片
						});
					}
				});
			},
			deleteByFileNameAll() {
				this.responseImages = [];
			},
			// 删除已上传的图片
			deleteByFileNameToFTP(event) {
				this.responseImages.splice(event.index, 1);
			},
			uploadFilePromise(fileUrl) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$configPath.baseURL + '/api/upload/uploadQiniu',
						filePath: fileUrl,
						name: 'file',
						header: {
							Authorization: 'Bearer ' + this.$store.getters.GET_VALUE("GET_TOKEN")
						},
						/* 会与全局header合并，如有同名属性，局部覆盖全局 */
						timeout: 6000,
						formData: {
							user: 'test'
						},
						success: (res) => {
							let data = JSON.parse(res.data);
							if (data.status == 0) {
								setTimeout(() => {
									this.imgList.push(data.data.picture);
									resolve(data.data.keyRes);
									this.$helpers.toast("上传成功");
								}, 1000)
							} else {
								if (uni.$u.test.isEmpty(data.msg)) {
									this.$helpers.toast("图片上传失败");
								} else {
									this.$helpers.toast(data.msg);
								}
								this.deleteByFileNameAll();
							}
						},
						fail: (res) => {
							let errMsg = res.errMsg;
							if (uni.$u.test.contains(errMsg, 'timeout')) {
								errMsg = "请求超时，请重新上传";
							}
							this.deleteByFileNameAll();
							this.$helpers.toast(errMsg);
						},
					});
				})
			},
			previewImg(imgUrl) {
				uni.previewImage({
					urls: [imgUrl], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			copyCode(value) {
				uni.setClipboardData({
					data: value,
					success: () => {
						uni.showToast({
							title: "复制成功"
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.u-upload__button {
		width: 140rpx !important;
		height: 140rpx !important;
	}

	/deep/ .u-form-item__body__left__content__label {
		font-size: 32rpx !important;
	}

	.u-textarea__field {
		height: 100rpx !important;
		padding: 0 20rpx;
	}

	.u-transition {
		background-color: #FFFFFF;
		padding: 0 20rpx 20rpx;
	}

	.u-button--mini {
		height: 60rpx !important;
	}

	.u-upload__wrap__preview {
		margin: 0 20rpx 16rpx 0 !important;
	}

	.title {
		font-size: $f-lg;
		margin-bottom: 20rpx;
	}

	.btn-warp {
		display: flex;
		justify-content: space-around;

		.btn-whith {
			width: 270rpx;
		}

		.btn-whith2 {
			width: 200rpx;
		}
	}

	.btn-warp2 {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;

		.btn-whith3 {
			width: 300rpx;
		}
	}

	.screen-warp {
		margin-bottom: 40rpx;

		.text {
			font-size: $f-sm;
		}

		.date {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.time {
				width: 325rpx;
				text-align: center;
				background-color: rgb(245, 245, 245);
				padding: 10rpx 30rpx;
				color: $u-content-color;
				font-size: $f-sm;
			}

			.date-center {
				color: $u-light-color;
				padding: 0 20rpx;
			}
		}
	}

	/* 选中的样式 */
	.tag-sel {
		font-size: $f-sm;
		padding: 10rpx 30rpx;
		background-color: rgb(240, 245, 255);
		color: rgb(96, 114, 255);
	}

	/* 未选中的样式 */
	.tag {
		font-size: $f-sm;
		padding: 10rpx 30rpx;
		background-color: rgb(245, 245, 245);
		color: rgba(0, 0, 0, 0.7);
	}

	.container {
		.content {
			padding: $u-padding-medium;

			.card {
				background-color: #fff;
				padding: $u-padding-medium;
				border-radius: 20rpx;
				margin-bottom: $u-margin-medium;

				.detail {
					display: flex;
					justify-content: space-between;

					.text {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.device-mobile {
							font-size: $uni-font-size-sm;
							margin-left: $u-margin-medium;

							.device {
								color: $u-tips-color;
							}
						}
					}
				}

				.detail-line {
					display: flex;
					justify-content: space-between;
					margin-bottom: 10rpx;

					.title-tips {
						width: 120rpx;
						font-size: $f-base;
					}
				}



				.feedback {
					margin-top: $u-margin-medium;
					margin-left: 90rpx;
					font-size: $uni-font-size-base;
					line-height: 50rpx;
				}

				.btn-view {
					text-align: right;
					display: flex;
					justify-content: flex-end;
					margin-top: $u-padding-large;

					.btn {
						width: 170rpx;
					}

					.processed {
						padding: $u-padding-medium 50rpx;
						font-size: $uni-font-size-lg;
						color: $u-tips-color;
					}
				}
			}
		}

		.dateTime {
			font-size: $uni-font-size-sm;
			color: $u-tips-color;
		}

		.tableFont {
			display: flex;
			align-items: center;
			font-size: 28rpx;
		}

		.copy-text {
			margin-left: 10rpx;
			color: rgba(0, 0, 0, 0.7);
		}

		.tableImg {
			width: 120rpx;
			height: 120rpx;
			vertical-align: middle;
			margin-bottom: 20rpx;
		}

		.header {
			background-color: white;

			.btn-search {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: $f-sm;
				padding: 30rpx;
			}

			.chuli {
				padding: 0rpx 30rpx 30rpx;

				.title {
					font-size: $uni-font-size-lg;
				}

				.hint {
					color: #fa3534;
					margin: 12px 10px 5px 10px;
					font-size: 28rpx;
				}
			}

			.shaixuan {
				display: flex;
				align-items: center;
				margin-left: 20rpx;
			}
		}

		.reply-view {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
		}

		.status-tips-red {
			font-size: 28rpx;
			color: red;
		}

		.status-tips-green {
			font-size: 28rpx;
			color: green;
		}

		.status-tips-orange {
			font-size: 28rpx;
			color: orange;
		}

		.status-tips-blue {
			font-size: 28rpx;
			color: rgb(96, 114, 255);
		}
	}
</style>